<template>
  <div class="one">
    <div>
      <div>
        <img :src="data.imgsrc">
      </div>
    </div>
    <div>
      <p>{{data.title}}</p>
      <span>
        <yd-icon name="readTime" slot="icon" custom></yd-icon>
      </span>
      <span v-text="htmlTime"></span>
    </div>

  </div>
</template>
<script>
  import {Icons} from 'vue-ydui/dist/lib.rem/icons'

  export default {
    components: {
      'yd-icon': Icons
    },
    data() {
      return {
        htmlTime: null
      }
    },
    methods: {
      time() {
        let time = new Date().getTime();
        let resourceTime = this.data.time;
        let n = time - resourceTime;
        let hour = 24 * 60 * 60 * 1000;  //24小时
        let minute = 60 * 60 * 1000;    //60分钟
        let second = 60 * 1000;      //60秒
        if (n > hour) {
          this.htmlTime = Math.round(n / hour) + '天前'
        } else if (n < hour && n > minute) {
          this.htmlTime = Math.round(n / minute) + '小时前'
        } else {
          this.htmlTime = Math.round(n / second) + '分钟前'
        }
      },
      details() {   //判断文章类型后往文章内容跳转
        var con = '';
        var contentType = this.data.contentType;
        switch (contentType) {
          case 'News':
            con = 'news';
            break;
          case 'Text':
            con = 'text';
            break;
          case 'Video':
            con = 'video';
            break;
        }
        this.$router.push({name: con + 'Content', params: {data: this.data}})
      },
    },
    props: ['data'],
    activated() {
      this.time()
    }
  }
</script>
<style lang="less" scoped>
  @import "~less/base";

  .one {
    height: 1.9rem;
    overflow: hidden;
    margin-bottom: 0.1rem;
    > div:nth-child(1) {
      margin-top: 0.31rem;
      margin-left: 0.18rem;
      float: left;
      > div {
        width: 2.16rem;
        height: 1.38rem;
        > img {
          width: 100%;
          height: 100%;
        }
      }
    }
    > div:nth-child(2) {
      float: left;
      width: 60%;
      margin-top: 0.31rem;
      margin-left: 0.26rem;
      > p {
        letter-spacing: 1px;
        line-height: 0.46rem;
        font-size: 16px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      > span {
        margin-top: 0.15rem;
        display: inline-block;
        color: @read-timeColor;
        > i {
          font-size: 0.24rem !important;
          color: #ffb36e;
        }
      }
    }
  }
</style>
